<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-02-15 17:58:43
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\layout\uiFlexbox\uiFlexbox.vue
 * CIMC-V2
-->
<template>
  <div class="w-full h-full">
    <div class="title">通讯监控</div>
    <div class="flex w-full" style="justify-content: space-around">
      <div v-for="(item, index) in radioList" :key="index" class="flex items-center" style="height: 100px">
        <div class="label_name">{{ item.name }}</div>
        <div
          class="point"
          :style="` background: ${statusList.find((cur) => cur.statusValue == item[statusProps])?.fontColor};box-shadow: 0 0 3px 5px ${
            statusList.find((cur) => cur.statusValue == item[statusProps])?.statusColor
          } inset;border: 1px solid ${statusList.find((cur) => cur.statusValue == item[statusProps])?.fontColor};`"
        ></div>
      </div>
    </div>
    <div class="title" style="border-radius: 0 0 50px 0">运行数据监控</div>
    <div class="from_list flex justify-between">
      <div>
        <div class="from_item flex items-center">
          <div class="label flex justify-center items-center">设备运行转速实际值</div>
          <div class="value flex items-center">
            <div class="flex-1 flex items-center justify-center">690</div>
            <div class="suffix suffix_border flex items-center justify-center">转/分钟</div>
          </div>
        </div>
        <div class="from_item flex items-center">
          <div class="label flex justify-center items-center">已织米长实际值</div>
          <div class="value flex items-center">
            <div class="flex-1 flex items-center justify-center">690</div>
            <div class="suffix suffix_border flex items-center justify-center">米</div>
          </div>
        </div>
        <div class="from_item flex items-center">
          <div class="label flex justify-center items-center">落布剩余时间</div>
          <div class="value flex items-center justify-center">
            <div class="flex-1 flex items-center justify-center">2小时12分钟</div>
            <div class="suffix flex items-center justify-center"></div>
          </div>
        </div>
        <div class="from_item flex items-center">
          <div class="label flex justify-center items-center">主轴运行方向</div>
          <div class="value flex items-center justify-center">
            <div class="flex-1 flex items-center justify-center">正转</div>
            <div class="suffix flex items-center justify-center"></div>
          </div>
        </div>
      </div>
      <div>
        <div class="from_item flex items-center">
          <div class="label flex justify-center items-center">设备运行转速设置值</div>
          <div class="value flex items-center">
            <div class="flex-1 flex items-center justify-around">
              <span>690</span>
              <div class="value_input flex items-center justify-center">
                <input type="text" value="650" />
              </div>
            </div>
            <div class="suffix suffix_border flex items-center justify-center">转/分钟</div>
          </div>
        </div>
        <div class="from_item flex items-center">
          <div class="label flex justify-center items-center">落布米长设置值</div>
          <div class="value flex items-center">
            <div class="flex-1 flex items-center justify-around">
              <span>690</span>
              <div class="value_input flex items-center justify-center">
                <input type="text" value="650" />
              </div>
            </div>
            <div class="suffix suffix_border flex items-center justify-center">米</div>
          </div>
        </div>
        <div class="from_item flex items-center"></div>
        <div class="from_item flex items-center justify-center">
          <div class="btn1 flex justify-center items-center">已制造长度清零</div>
          <div class="btn2 flex justify-center items-center">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'MoudleOne',
    props: {
      statusList: {
        type: Array,
        default: () => [],
      },
      tx: {
        type: Array,
        default: () => [],
      },
      yx: {
        type: Array,
        default: () => [],
      },
      statusProps: {
        type: String,
        default: 'status',
      },
    },
    data() {
      return {
        radioList: [
          {
            name: 'L1梳节',
            status: 1,
          },
          {
            name: 'L2梳节',
            status: 1,
          },
          {
            name: 'L3梳节',
            status: 1,
          },
          {
            name: 'L4梳节',
            status: 1,
          },
          {
            name: 'L5梳节',
            status: 1,
          },
          {
            name: '牵引',
            status: 1,
          },
          {
            name: '卷曲',
            status: 1,
          },
        ],
      }
    },
    methods: {},
  })
</script>
<style lang="scss" scoped>
  .title {
    background: linear-gradient(to right bottom, #0055c0, #041c72);
    width: 170px;
    height: 45px;
    border-radius: 5px 0 50px 0;
    margin: -1px 0 0 -1px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 0 0 0 20px;
  }
  .point {
    width: 17px;
    height: 17px;
    border-radius: 50%;
  }
  .label_name {
    color: #fff;
    font-size: 17px;
    margin: 0 5px;
  }
  .from_list {
    height: 650px;
    padding: 10px 30px;
    div {
      width: 48%;
    }
    .from_item {
      height: 70px;
      width: 100%;
      margin: 40px 0 70px;
      .label {
        background: linear-gradient(to right bottom, #0051ba, #002483);
        width: 170px;
        height: 100%;
        border: 1px solid #0051ba;
        border-right: none;
        border-radius: 5px 0 0 5px;
        color: #fff;
        // letter-spacing: 1px;
        // font-weight: bold;
        font-size: 16px;
      }
      .value {
        border: 1px solid #0051ba;
        border-left: none;
        flex: 1;
        height: 100%;
        border-radius: 0 5px 5px 0;
        color: #fff;
        font-size: 16px;
        div {
          height: 100%;
        }
        .suffix {
          width: 100px;
        }
        .suffix_border {
          border-left: 1px solid #0051ba;
        }
        .value_input {
          border: 1px solid #0051ba;
          background: #004ab1;
          border-radius: 5px;
          width: 100px;
          height: 40px;
          input {
            background: rgba($color: #000000, $alpha: 0);
            width: 90%;
            text-align: center;
          }
        }
      }
      .btn1 {
        width: 150px;
        height: 100%;
        background: #294a8c;
        border-radius: 5px;
        margin: 0 20px;
        color: #fff;
        letter-spacing: 1px;
        font-weight: bold;
        font-size: 17px;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
      .btn2 {
        width: 150px;
        height: 100%;
        background: #004aff;
        border-radius: 5px;
        margin: 0 20px;
        color: #fff;
        letter-spacing: 1px;
        font-weight: bold;
        font-size: 17px;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
    }
    // border: 1px solid;
  }
</style>
